{{#extend "header"}}
<title>高德地图测试</title>
<meta name="keywords" content="">
<meta name="description" content="">
{{/extend}}
{{#extend "style"}}
<link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>
{{/extend}}
<div id='container'></div>
<div id="tip"></div>

{{#extend "script"}}
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=81369dca716aa47f2308809701fd220c"></script>
<script type="text/javascript">
    var map, geolocation;

    //加载地图，调用浏览器定位服务
    map = new AMap.Map('container', {
        resizeEnable: true,
        zoom: 12
    });
    //模拟地址数据
    var markersObj = [{
        icon: 'http://webapi.amap.com/theme/v1.3/markers/n/mark_b1.png',//点标记图标
        sId: 1,//店铺id
        position: [116.488992, 39.971259]//经纬度
    }, {
        icon: 'http://webapi.amap.com/theme/v1.3/markers/n/mark_b2.png',
        sId: 2,
        position: [116.478692, 39.978511]
    }, {
        icon: 'http://webapi.amap.com/theme/v1.3/markers/n/mark_b3.png',
        sId: 3,
        position: [116.514483, 39.975453]
    }, {
        icon: 'http://webapi.amap.com/theme/v1.3/markers/n/mark_b4.png',
        sId: 4,
        position: [116.443887, 39.94315]
    }, {
        icon: 'http://webapi.amap.com/theme/v1.3/markers/n/mark_b5.png',
        sId: 5,
        position: [116.514483, 39.975453]
    }, {
        icon: 'http://webapi.amap.com/theme/v1.3/markers/n/mark_b6.png',
        sId: 6,
        position: [116.373592, 39.998469]
    }, {
        icon: 'http://webapi.amap.com/theme/v1.3/markers/n/mark_b7.png',
        sId: 7,
        position: [116.240383, 39.974269]
    }, {
        icon: 'http://webapi.amap.com/theme/v1.3/markers/n/mark_b8.png',
        sId: 8,
        position: [116.46998, 39.86987]
    }, {
        icon: 'http://webapi.amap.com/theme/v1.3/markers/n/mark_b9.png',
        sId: 9,
        position: [116.392131, 39.78596]
    }];
    //遍历点标注
    for (var i in markersObj) {
        var marker = new AMap.Marker({
            position: markersObj[i].position,//marker所在的位置
            title: '点击跳转',
            //content: '这是哪？'
            icon: new AMap.Icon({
                size: new AMap.Size(20, 30),  //图标大小
                image: markersObj[i].icon
                //imageOffset: new AMap.Pixel(0, -20)//精灵图使用，控制偏移量
            })
        });
        //绑定点击事件
        marker.on('tap', function () {
            location.href = 'http://m.baidu.com/?t=' + markersObj[i].sId
        });
        marker.setMap(map);
        //信息窗体
        var infoWindow = new AMap.InfoWindow({
            autoMove: true,
            offset: new AMap.Pixel(0, -20)
        });
        infoWindow.setContent('点我直接可以跳转呦');
        infoWindow.open(map, [116.478692, 39.978511]);
    }

    AMap.plugin(['AMap.ToolBar', 'AMap.Scale', 'AMap.OverView'],
        function () {
            map.addControl(new AMap.ToolBar());//工具条
            map.addControl(new AMap.Scale());  //比例尺
        });
    //定位方法
    map.plugin('AMap.Geolocation', function () {
        geolocation = new AMap.Geolocation({
            enableHighAccuracy: true,//是否使用高精度定位，默认:true
            timeout: 10000,          //超过10秒后停止定位，默认：无穷大
            buttonOffset: new AMap.Pixel(5, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
            zoomToAccuracy: false,      //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
            buttonPosition: 'LB',      //定位按钮位置
            extensions: 'base'
        });
        map.addControl(geolocation);
        geolocation.getCurrentPosition();
        AMap.event.addListener(geolocation, 'complete', onComplete);//返回定位信息
        AMap.event.addListener(geolocation, 'error', onError);      //返回定位出错信息
    });
    //解析定位结果
    function onComplete(data) {
        var str = ['定位成功'];
        str.push('当前位置：' + data.formattedAddress);
        str.push('经度：' + data.position.getLng());
        str.push('纬度：' + data.position.getLat());
        if (data.accuracy) {
            str.push('精度：' + data.accuracy + ' 米');
        }
        //如为IP精确定位结果则没有精度信息
        str.push('是否经过偏移：' + (data.isConverted ? '是' : '否'));
        document.getElementById('tip').innerHTML = str.join('<br>');
        for (var i in markersObj) {
            getDistance(data.position.getLng(), data.position.getLat(), markersObj[i].position);
        }
    }
    //解析定位错误信息
    function onError(data) {
        document.getElementById('tip').innerHTML = '定位失败';
    }
    //计算两点之间距离
    function getDistance(lng, lat, positionArr) {
        //计算距离起点
        var lnglat = new AMap.LngLat(lng, lat);
        //计算距离终点
        console.log('距离目的地：' + lnglat.distance(positionArr) + '米');
    }

    //根据经纬度反向获取当前地址信息
    function getAddressName(lng, lat) {
        var geocoder;
        AMap.service('AMap.Geocoder', function () {//回调函数
            //实例化定位Geocoder
            geocoder = new AMap.Geocoder({
                city: "010"//城市，默认：“全国”
            });
        });
        var lnglatXY = [lng, lat];//地图上所标点的坐标
        geocoder.getAddress(lnglatXY, function (status, result) {
            if (status === 'complete' && result.info === 'OK') {
                alert('当前位置：' + result.regeocode.formattedAddress);
            } else {
                console.log('获取地址失败');
            }
        });
    }
</script>
{{/extend}}
